<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p2{
				/*margin-left:28px;*/
				/*em单位，以当前元素的文字大小为一个1em*/
				text-indent:2em;/*首行缩进*/
				text-align: left;
				letter-spacing: 10px;
				height: 60px;
				overflow: hidden;/*把超出的部分隐藏起来*/
				overflow: scroll;/*把超出的部分隐藏起来*/
				overflow-x:hidden;/*把水平方向的超出部分隐藏*/
			}
		</style>
	</head>
	<body>
		<p class="p2">
			<img height="16" src="img/陈省文.jpg"/><a href="http://baidu.com">陈老师</a>今天带大家上高速，不怕死的就跟上.陈老师今天带大家上高速.<img height="16" src="img/陈省文.jpg"/><a href="http://baidu.com">陈老师</a>今天带大家上高速，不怕死的就跟上.陈老师今天带大家上高速.<img height="16" src="img/陈省文.jpg"/><a href="http://baidu.com">陈老师</a>今天带大家上高速，不怕死的就跟上.陈老师今天带大家上高速.<img height="16" src="img/陈省文.jpg"/><a href="http://baidu.com">陈老师</a>今天带大家上高速，不怕死的就跟上.陈老师今天带大家上高速.<img height="16" src="img/陈省文.jpg"/><a href="http://baidu.com">陈老师</a>今天带大家上高速，不怕死的就跟上.陈老师今天带大家上高速.
		</p>
		
		<style type="text/css">
			.p1{
				
				height: 18px;
				font-size: 18px;
				background: skyblue;
				
				/*单行溢出省略号*/
				width: 100px;
				text-overflow:ellipsis;
				white-space: nowrap;/*禁止换行*/
				overflow: hidden;
			}
		</style>
		<p class="p1">
			宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥
		</p>
		
		
		
		
		
		<style type="text/css">
			.p3{
				width: 100px;
				height: 36px;
				font-size: 18px;
				
				overflow: hidden;/*条件1,内容溢出隐藏*/
				text-overflow: ellipsis;/*条件2，设置省略号出现*/
				display: -webkit-box;/*条件3，设置为弹性盒子*/
				-webkit-line-clamp: 2;/*条件4，设置要显示的行数*/
				-webkit-box-orient: vertical;/*条件5，设置排版方向*/
			}
		</style>
		<p class="p3">
			宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥宝哥哥
		</p>
		
		
		
		<style>
			.p4{
				width: 100px;
				height: 100px;
				font-size: 12px;
				background: skyblue;
				word-wrap: break-word;/*强制换行，这样的话，就不怕你不换行了*/
			}
		</style>
		<p class="p4">
			测试数字是否换行12312312312312asldkjaslkdjlkasjdlkasjdlkasj1231233123213123123213213123123
		</p>
		
	</body>
</html>
